<template>
  <section class="book" style="margin-top: 40px;margin-bottom: 50px;">
       <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"  v-for="item in carouselList"><!--v-bind:style="{backgroundImage: 'url(' + item.img + ')'}"-->
              <img :src="item.img" alt="">
            </div>
          </div>
         <div class="swiper-pagination"></div>
         <div class="swiper-button-prev swiper-button-white"></div>
         <div class="swiper-button-next swiper-button-white"></div>
       </div>
    <!--<swiper :options="swiperOption" ref="mySwiper" >
      &lt;!&ndash; slides &ndash;&gt;
      <swiper-slide v-for="(item,index) in carouselList" :key="index">
        <img :src="item.img" alt="">
      </swiper-slide>
      &lt;!&ndash; Optional controls &ndash;&gt;
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
-->
     <article class="list-box">
       <div class="phone-viewport">
         <md-list class="custom-list md-triple-line" v-for="(item,index) in bookList" :key="index">
           <md-list-item>
             <md-avatar>
               <img :src="item.img" alt="People">
             </md-avatar>
             <div class="md-list-text-container">
               <span>{{item.name}}</span>
               <span>{{item.des}}</span>
               <p>{{item.info}}</p>
             </div>
             <md-button class="md-icon-button md-list-action">
               <md-icon class="md-primary">star</md-icon>
             </md-button>
             <md-divider class="md-inset"></md-divider>
           </md-list-item>
         </md-list>

       </div>

     </article>
  </section>
</template>
<script>
    import Swiper from '../../../static/js/swiper.min.js'
    require('swiper/dist/css/swiper.css')
  //import { swiper , swiperSlide} from 'vue-awesome-swiper'


  export default {
    name:'book',
    data(){
      return {
        bookList:{},
        carouselList:{},
      }
    },
    mounted(){
      //获取轮播图片

      //书籍获取
      this.$http.get("http://localhost:3000/book")
        .then((response)=>{
            this.bookList = response.body;
        })
    },
    created(){
       this.$nextTick(function () {
         this.$http.get("http://localhost:3000/Carousel")
           .then((response)=>{
             this.carouselList = response.body;
             var mySwiper = new Swiper('.swiper-container', {
               //分页器
               observer:true,
               observeParents:true,
               pagination: '.swiper-pagination',
               paginationClickable: true,
               autoplay: 1000,
               speed: 500,
               loop: true,
               autoplayDisableOnInteraction : false,
               prevButton:'.swiper-button-prev',
               nextButton:'.swiper-button-next'

             })
           })
       })
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    }
  }
</script>
<style>

  .book-list>img{
    width: 52px;
    height: 52px;
    border-radius:50% ;
  }
  .book-list>span{
    display: inline-block;
    padding-left: 10px;
  }


</style>
